﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Elycharts  例子代码 :  饼 </title>


    <!-- 使用 Elycharts  需要 使用下面这三个 js 类库.   -->
    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../../Scripts/raphael.js" type="text/javascript"></script>
    <script src="../../Scripts/elycharts.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(document).ready(function () {



            $.elycharts.templates['pie_basic_1'] = {

                // 饼图的类型是 pie
                type: 'pie',



                defaultSeries: {


                    plotProps: {
                        // 这里定义了 饼图中， 划分每一个片的边框线的颜色.
                        stroke: 'white',

                        // 这个是 边框线的宽度.
                        'stroke-width': 2,

                        opacity: .8
                    },

                    // 这里是 当鼠标移动到 饼图的某个片上。 这个片移动多少个像素.
                    highlight: {
                        move: 20
                    },


                    tooltip: {
                        frameProps: { opacity: .5 }
                    },

                    
                    startAnimation: {
                        // active: true,
                        type: 'grow'
                    }
                },



                features: {


                    // 这里定义了 标题显示的位置.
                    legend: {

                        // 如果 horizontal 为 true， 那么 标题 显示的为横向现实
                        // 如果 horizontal 为 false， 那么 标题 显示的为纵向现实
                        horizontal: false,

                        // 标题的宽度/高度.
                        width: 100,
                        height: 80,

                        // 标题显示在画面的什么坐标上面.
                        x: 50,
                        y: 50,


                        borderProps: {
                            "fill-opacity": .3
                        }
                    }
                }
            };







            $.elycharts.templates['pie_basic_2'] = {
                // 饼图的类型是 pie
                type: 'pie',

                // 初始的背景色.
                style: { 'background-color': 'black' },


                defaultSeries: {

                    plotProps: {
                        // 这里定义了 饼图中， 划分每一个片的边框线的颜色.
                        stroke: 'black',

                        // 这个是 边框线的宽度.
                        'stroke-width': 2,


                        opacity: .6
                    },


                    // 这里是 当鼠标移动到 饼图的某个片上。 这个片需要设置的新的属性.
                    highlight: {
                        newProps: { opacity: 1 }
                    },


                    tooltip: {
                        frameProps: { opacity: .8 }
                    },



                    // 这里定义了 label 显示， 以及颜色等信息.
                    label: {
                        active: true,
                        props: { fill: 'white' }
                    },


                    startAnimation: {
                        // active: true,
                        type: 'avg'
                    }
                }
            };





            // 饼图的例子 1
            $("#pie_chart_1").chart({

                // 使用前面定义的模板
                template: "pie_basic_1",

                // 饼图中的数值.
                values: {
                    serie1: [88, 78, 33, 95]
                },


                // 标题.
                labels: ["a部门", "b部门", "c部门", "d部门"],

                legend: ["a部门", "b部门", "c部门", "d部门"],


                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a部门营业额:88W", "b部门营业额:78W", "c部门营业额:33W", "d部门营业额:95W"]
                },


                // 饼图中每个部分的样式设置.
                defaultSeries: {
                    values: [{
                        plotProps: {
                            fill: "red"
                        }
                    }, {
                        plotProps: {
                            fill: "blue"
                        }
                    }, {
                        plotProps: {
                            fill: "green"
                        }
                    }, {
                        plotProps: {
                            fill: "gray"
                        }
                    }]
                }
            });





            // 饼图的例子 2
            $("#pie_chart_2").chart({

                // 使用前面定义的模板
                template: "pie_basic_2",


                // 饼图中的数值.
                values: {
                    serie1: [26, 82, 96, 28]
                },


                // 标题.
                labels: ["a部门", "b部门", "c部门", "d部门"],


                // 因为这个饼图， 每个片上，都显示了 Label 了， legend 没有显示的必要了.
                // legend: ["a部门", "b部门", "c部门", "d部门"],


                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a部门营业额:26W", "b部门营业额:82W", "c部门营业额:96W", "d部门营业额:28W"]
                },


                // 每个饼的样式.
                defaultSeries: {
                    r: -0.5,
                    values: [{
                        plotProps: {
                            fill: "red"
                        }
                    }, {
                        plotProps: {
                            fill: "blue"
                        }
                    }, {
                        plotProps: {
                            fill: "green"
                        }
                    }, {
                        plotProps: {
                            fill: "gray"
                        }
                    }]
                }
            });






            // 饼图的例子 3
            $("#pie_chart_3").chart({
                // 使用前面定义的模板
                template: "pie_basic_2",

                // 饼图中的数值.
                values: {
                    serie1: [11, 34, 2, 35],
                    serie2: [55, 82, 69, 82]                    
                },


                // 标题.
                labels: ["a部门", "b部门", "c部门", "d部门"],


                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a部门净利润:11W", "b部门净利润:34W", "c部门净利润:2W", "d部门净利润:35W"],
                    serie2: ["a部门营业额:55W", "b部门营业额:82W", "c部门营业额:69W", "d部门营业额:82W"]
                },

                // 每个饼的样式.
                defaultSeries: {
                    values: [{
                        plotProps: {
                            fill: "red"
                        }
                    }, {
                        plotProps: {
                            fill: "blue"
                        }
                    }, {
                        plotProps: {
                            fill: "green"
                        }
                    }, {
                        plotProps: {
                            fill: "gray"
                        }
                    }]
                }
            });

        });
    </script>



</head>
<body>




<h3>  饼图的例子 1   </h3>

<div id="pie_chart_1"  style="width:600px;height:400px;border-style:solid;">  

</div>



<hr />
<h3>  饼图的例子 2  </h3>

<div id="pie_chart_2"  style="width:600px;height:400px;border-style:solid;">  

</div>



<hr />
<h3>  饼图的例子 3  </h3>

<div id="pie_chart_3"  style="width:600px;height:400px;border-style:solid;">  

</div>



</body>
</html>
